<template>
	<view class="commission-details" ref="container">
		<view class="promoterHeader bg-color-black">
			<view class="headerCon acea-row row-between-wrapper">
				<view>
					<view class="name">可提现积分</view>
					<view class="money">
						<text class="num">{{ commission }}</text>
					</view>
				</view>
				<view class="iconfont icon-jinbi1"></view>
			</view>
		</view>
		<view class="sign-record" ref="content">
			<view class="list">
				<view class="item" v-for="(item, infoIndex) in info" :key="infoIndex">
					<view class="title">
						发起时间：{{ item.createTime }}
						<span>{{ item.status == -1 ? '提现失败' :item.status == 0 ? '审核中' : '提现成功'}}</span>
					</view>
					<view class="mode_view">
						<span>提现方式：{{ item.extractType == 'bank'? '银行卡' : '零钱' }}</span>
						<span>姓名：{{ item.realName.substring(0, 1) + "*" }}</span>
						<span>银行卡号：{{ item.bankCode.substring(0, 2) + " **** **** **** " + item.bankCode.substring(item.bankCode.length - 4, item.bankCode.length) }}</span>
						

						<text>{{ item.extractPrice}}</text>
						
						
						<view class="failMsg" v-if="item.status == -1">
							<view>失败原因：{{ item.failMsg }}</view>
						</view>
					</view>
				</view>			
			</view>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
	</view>
</template>
<script>
	import {
		getCommissionInfo,
		getSpreadInfo
	} from "@/api/user";
	import {
		interval
	} from '@/utils'
	import Loading from "@/components/Loading";

	export default {
		name: "CashRecord",
		components: {
			Loading
		},
		props: {},
		data: function() {
			return {
				info: [],
				commission: 0,
				where: {
					page: 1,
					limit: 10
				},
				types: 4,
				loaded: false,
				loading: false
			};
		},
		mounted: function() {
			this.getCommission();
			this.getIndex();
		},
		onReachBottom() {
			this.loading === false && this.getIndex();
		},
		methods: {
			getIndex: function() {
				let that = this;
				if (that.loading == true || that.loaded == true) return;
				that.loading = true;
				getCommissionInfo(that.where, that.types).then(
					res => {
						that.loading = false;
						that.loaded = res.data.length < that.where.limit;
						that.where.page = that.where.page + 1;
						that.info.push.apply(that.info, res.data);
						console.log(1)
						console.log(res.data)
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			getCommission: function() {
				let that = this;
				getSpreadInfo().then(
					res => {
						that.commission = interval(res.data.lastDayCount);
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					}
				);
			}
		}
	};
</script>
<style lang="less">
	.sign-record {
		.list {
			padding: 30rpx 20rpx;

			.item {
				width: 100%;
				background-color: #FFFFFF;
				margin-bottom: 20rpx;

				.title {
					height: 80rpx;
					width: 100%;
					font-size: 28rpx;
					padding: 0 30rpx;
					line-height: 80rpx;
					border-bottom: #e8e8e8 solid 1rpx;

					span {
						float: right;
						color: #e45050;
					}
				}

				.mode_view {
					height: auto;
					overflow: hidden;
					width: 100%;
					position: relative;
					padding: 0 30rpx;

					span {
						display: block;
						width: 100%;
						height: 70rpx;
						line-height: 70rpx;
						font-size: 26rpx;

					}

					text {
						position: absolute;
						top: 80rpx;
						right: 40rpx;
						font-size: 50rpx;
					}
					
					.failMsg{
						border-top: #e8e8e8 solid 1rpx;
						color: #e45050;
						padding: 30rpx 0;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
